<template>
  <div class="pull-down">
    <van-dropdown-menu active-color="#c30c22ff" @open="open" @close="closes">
      <van-dropdown-item title="区域" ref="item" v-model="switch1" @touchmove.prevent>
        <!-- 标签 -->
        <homeTag></homeTag>
        <!-- 筛选区域 -->
        <div class="area">
          <!-- 左侧边导航 -->
          <div class="stand-nav">
            <van-sidebar v-model="activeKey" @change="onChange">
              <van-sidebar-item title="全部区域" />
              <van-sidebar-item title="泰利服装城" v-for="(item,i) in 20" :key="i" />
            </van-sidebar>
          </div>
          <!-- 右侧区域 -->
          <div class="floors">
            <div class="top-floors">
              <van-button type="default" color="#f5f5f5">全部</van-button>
            </div>

            <div class="other-floors">
              <van-button type="default" color="#f5f5f5" v-for="(item,i) in 10" :key="i">1楼</van-button>
            </div>
            <div class="selector-button">
              <div>重置</div>
              <div>确认(1)</div>
            </div>
          </div>
        </div>
      </van-dropdown-item>
      <div class="filtrate" @click="showPopup">
        <span>筛选</span>
        <van-icon name="play" color="#e3e3e3" />
      </div>
      <van-popup
        v-model="isShow"
        position="right"
        :style="{ height: '100%',width:'85%'}"
        @touchmove.prevent
      >筛选</van-popup>
    </van-dropdown-menu>
  </div>
</template>

<script>
import homeTag from "../components/homeTag.vue";
export default {
  components: {
    homeTag
  },
  data() {
    return {
      switch1: false,
      // 侧边导航栏选中颜色
      activeKey: 0,
      // 标签开关
      show: {
        primary: true,
        success: true
      },
      isShow: false
    };
  },
  methods: {
    open() {},

    closes() {},
    //   导航切换监听事件
    onChange(index) {
      // this.$notify({ type: "primary", message: index });
    },
    // 关闭标签
    close(type) {
      this.show[type] = false;
    },
    showPopup() {
      this.isShow = true;
      this.$refs.item.toggle(false);
    }
  }
};
</script>

<style lang="less" scoped>
@color: #c30c22ff;
// 下拉菜单
.pull-down {
  // background-color: skyblue;
  position: fixed;
  left: 0;
  top: 35px;
  height: 38px;
  width: 100%;
  display: flex;
  background-color: #fff;
  justify-content: space-between;
  .van-hairline--top-bottom {
    display: flex;
    align-items: center;
  }
  // 去掉下拉上下边框
  .van-hairline--top-bottom::after,
  /deep/.van-hairline-unset--top-bottom::after {
    border-width: 0;
  }
  /deep/ .van-dropdown-menu__item {
    /deep/.van-ellipsis {
      font-size: 12px;
      // color: #464646;
    }
    /deep/.van-dropdown-menu__title::after {
      color: #e3e3e3;
    }
    width: 80px;
    &:nth-child(1) {
      border-right: 2px solid #eee;
    }
  }
  /deep/.van-dropdown-item__content {
    height: 100%;
  }
  /deep/.van-dropdown-menu {
    height: 100%;
  }
  // 下拉框
  /deep/.van-dropdown-menu__item {
    height: 19px;
    // 下拉字体
    .van-ellipsis {
      font-size: 14px;
    }
  }
  // 区域弹出框
  .area {
    margin-top: 46.5px;
    // display: flex;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    // 侧边导航栏
    .stand-nav {
      position: absolute;
      left: 0;
      top: 0;
      width: 150px;
      height: 100%;
      overflow: scroll;
      /*       /deep/.van-sidebar-item{
        text-align: left;
      } */
      .van-sidebar {
        width: 100%;
      }
      /deep/.van-sidebar-item--select {
        line-height: 40px;
        text-align: center;
        width: 100%;
        height: 40px;
        font-size: 14px;
        color: @color;
        padding: 0;
        border-color: @color;
      }
      /deep/.van-sidebar-item {
        line-height: 40px;
        width: 100%;
        text-align: center;
        height: 40px;
        font-size: 14px;
        padding: 0;
      }
    }
    // 楼层
    .floors {
      // margin-left: 5px;
      overflow: hidden;
      position: absolute;
      left: 155px;
      top: 0;
      box-sizing: border-box;
      width: 220px;
      height: 100%;
      overflow: scroll;
      /deep/.van-button--normal {
        height: 33px;
        line-height: 0px;
      }
      .top-floors {
        padding: 0 20px;
        width: 220px;
        height: 33px;
        /deep/.van-button--normal {
          padding: 0 0.4rem;
          font-size: 0.37333rem;
          width: 100%;
        }
      }
      .other-floors {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        /deep/.van-button--normal {
          width: 70px;
          margin: 20px 20px 0;
        }
      }
    }
    // 楼层底部选择按钮
    .selector-button {
      width: 200;
      height: 33px;
      margin: 40px 20px 0;
      display: flex;
      div {
        width: 100px;
        height: 40px;
        line-height: 40px;
        color: @color;
        text-align: center;
        font-size: 12px;
        &:nth-child(2) {
          background-color: @color;
          color: #fff;
        }
      }
    }
  }
  .van-button__text {
    color: #000;
  }
}
// 左侧导航栏文字位置
.pull-down .area .stand-nav[data-v-463ca046] .van-sidebar-item {
  text-align: left;
  /deep/ .van-sidebar-item__text {
    margin-left: 15px;
  }
}
.filtrate {
  margin-left: 20px;
  display: flex;
  align-items: center;
  span {
    font-size: 14px;
  }
  /deep/.van-icon-play {
    margin-left: 10px;
    transform: rotateZ(90deg);
    font-size: 12px;
  }
}
</style> 